<template>
  <div class="main">
    <el-row type="flex" justify="center">
      <el-col class="content" :xs="24" :sm="24" :md="15" :lg="15" :xl="13">
        <slot name="bread" class="bread"></slot>
        <slot name="articleItem"></slot>
        <slot name="articleDetail"></slot>
      </el-col>
      <el-col class="hidden-sm-only content" :xs="0" :md="4" :lg="5" :xl="9">
        <div class="aside">
          <el-avatar
            src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
            :size="100"
          ></el-avatar>
          <div class="nickname">{{userName}}</div>
          <div class="des">文字描述。。。。。。。。。。。</div>
          <div class="tag">
            <el-tag>Hello Word</el-tag>
            <el-tag type="success">CV工程师</el-tag>
            <el-tag type="warning">秃头</el-tag>
            <el-tag type="info">菜鸟前端</el-tag>
            <el-tag type="danger">被访问{{123456}}次数</el-tag>
          </div>
          <h4>社交账号</h4>
          <div>
            <el-popover
              placement="top-start"
              title="标题"
              width="200"
              trigger="hover"
              content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
            >
              <div slot="reference">
                <i class="el-icon-star-on"></i>
              </div>
            </el-popover>
          </div>
        </div>
        <slot name="catalog" class="catalog"></slot>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userName: "admin",
    };
  },

  components: {},
  created() {},
};
</script>
<style >
</style>
<style scoped>
.content {
  background-color: #fff;
  margin: 20px 10px 0;
  border-radius: 10px;
  padding: 0 1rem;
}

.aside {
  display: flex;
  padding: 1.875rem;
  flex-direction: column;
  align-items: center;
}
.aside > * {
  margin: 10px 0;
}
.nickname {
  font-size: 1.875rem;
  font-family: "Helvetica Neue";
  color: #1890ff;
  font-style: italic;
}
.des {
  font-size: 0.75rem;
}
</style>